<template>
  <div name="消息发送" class="gl_contentBox gl_heightFull">
    <!-- 操作按钮 -->
    <!-- 暂不开发 -->
    <!-- <el-row :gutter="20" class="gl_mb_15">
      <el-col :span="24">
        <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="openAddTemplate()">新建消息发送</el-button>
      </el-col>
    </el-row> -->
    <!-- 筛选项 -->
    <filterBox :qo="qo" :type="'message'" @queryList="queryList" />
    <!-- 表格 -->
    <el-table v-loading="loading" :data="tableData" style="width: 100%" class="gl_table_noBorder" :border="false" stripe size="mini">
      <!-- 通用-序号 -->
      <el-table-column type="index" label="序号" align="center" width="50" />
      <el-table-column prop="name" label="模板名称" align="center">
        <template slot-scope="{row}">
          <div>{{ row.messageTemplate ? row.messageTemplate.name : '' }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="模板类型" align="center">
        <template slot-scope="{row}">
          <div>{{ row.messageTemplate ? row.messageTemplate.messageTemplateType.name : '' }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="sendTime" label="发送时间" align="center">
        <template slot-scope="{row}">
          <div>{{ row.sendTime }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="creatorName" label="操作人" align="center" />
      <el-table-column prop="status" label="发送状态" align="center">
        <template slot-scope="{row}">
          <div>{{ row.sendStatus ? '已发送' : '未发送' }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="operating" label="操作" align="center" width="200">
        <template slot-scope="{row,$index}">
          <el-button type="text" size="mini" @click="openInfoDetails(row,$index)">查看</el-button>
          <!-- 暂不开发 -->
          <el-button type="text" size="mini" @click="deleteItem(row,$index)">
            <span class="gl_color_error">删除</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-row class="gl_pt_15" style="text-align: right;">
      <el-pagination
        :current-page="qo.Page"
        :page-size="qo.MaxResultCount"
        :total="total"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>

    <!-- 新建消息弹窗 -->
    <el-dialog
      class="gl_dialog_TitleLine"
      width="450px"
      title="消息发送"
      :visible.sync="sendMessageDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <el-form
        ref="sendMessageInput"
        :model="sendMessageInput"
        label-width="80px"
        size="mini"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="调用模板" prop="type">
              <el-select v-model="sendMessageInput.type" size="mini" placeholder="模板类型" filterable style="width: 100%">
                <el-option v-for="item in templatetList" :key="item.code" :value="item.code" :label="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="发送目标" prop="name">
              <el-select v-model="sendMessageInput.type" size="mini" placeholder="发送目标" filterable style="width: 100%">
                <el-option v-for="item in sendTargetList" :key="item.code" :value="item.code" :label="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button size="mini" @click="sendMessageDialog = false">取 消</el-button>
        <el-button size="mini" :loading="sendDialogLoading" type="primary" @click="submitAddTemplate">确认</el-button>
      </div>
    </el-dialog>

    <!-- 消息详情弹窗 -->
    <el-dialog
      class="gl_dialog_TitleLine"
      width="800px"
      title="消息详情"
      :visible.sync="infoDetailsDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <el-table v-loading="infoLoading" :data="detailsInfTableData" style="width: 100%" class="gl_table_noBorder" :border="false" stripe size="mini">
        <!-- 通用-序号 -->
        <el-table-column type="index" label="序号" align="center" width="50" />
        <el-table-column prop="name" label="模板名称" align="center">
          <template slot-scope="{row}">
            <div>{{ row.templateName }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="模板类型" align="center">
          <template slot-scope="{row}">
            <div>{{ row.templateTypeName }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="creationTime" label="发送时间" align="center" width="150px;">
          <template slot-scope="{row}">
            <div>{{ row.creationTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="registerStudentName" label="学员姓名" align="center">
          <template slot-scope="{row}">
            <div>{{ row.registerStudentName ? row.registerStudentName : '' }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="toUserName" label="接收人" align="center">
          <template slot-scope="{row}">
            <div>{{ row.toUserName ? row.toUserName : row.toPhoneNumber }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="toPhoneNumber" label="手机号" align="center" /> -->
        <el-table-column prop="messageStatus" label="接收状态" align="center">
          <template slot-scope="{row}">
            <div>{{ row.messageStatus && row.messageStatus.name ? row.messageStatus.name : '' }}</div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { FormatDate } from '@/lib';
import filterBox from './components/filterBox.vue';
import { api_GET_ClubMessage, api_GET_ClubMessageMessagePushLogs, api_DELETE_ClubMessageId } from '@/extend/api/hallswaggerApi/app.js';
import { Api_GET_ClubMessageQO } from '@/lib/form/hall/swaggerForm';
export default {
  components: {
    filterBox
  },
  data () {
    return {
      qo: new Api_GET_ClubMessageQO(),
      tableData: [],
      loading: false,
      total: 0,
      // 新增模板
      sendMessageDialog: false,
      sendDialogLoading: false,
      sendMessageInput: {},
      addTemplate_Rules: {},
      sendTargetList: [], // 发送目标列表
      templatetList: [], // 调用模板列表
      // 信息详情
      infoDetailsDialog: false,
      detailsInfTableData: [],
      infoLoading: false
    };
  },
  created() {
    // delete this.qo.IncludeMessageTemplate;
    // delete this.qo.IncludeMessageTemplateType;
    // delete this.qo.IncludeMessageStatus;
    // delete this.qo.Page;
    // delete this.qo.IncludeMessageSendingTargetType;
    this.qo.IncludeMessageTemplate = true;
    this.qo.IncludeMessageTemplateType = true;
    this.qo.IncludeDeleted = true;
    // this.qo.IncludeMessageStatus = true;
    // this.qo.IncludeMessageSendingTargetType = true;
    this.getPageList();
  },
  methods: {
    getPageList(page) {
      this.qo.Page = page || 1;
      this.qo.SkipCount = (this.qo.Page - 1) * this.qo.MaxResultCount;
      this.loading = true;
      api_GET_ClubMessage(this.qo).then(
        res => {
          if (res) {
            this.tableData = res.items || [];
            this.tableData.map(item => {
              item.sendTime = item.sendTime ? FormatDate(item.sendTime, 'yyyy-MM-dd HH:mm:ss') : '';
            });
            console.log('kdkd', this.tableData);
            this.total = res.totalCount;
            this.loading = false;
          }
        },
        error => {
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
          this.loading = false;
        }
      );
    },
    queryList(obj) {
      this.qo = obj;
      this.getPageList();
    },
    // 新建模板
    openAddTemplate() {
      this.sendMessageDialog = true;
    },
    // 确认新建
    submitAddTemplate() {},
    // 查看详情
    openInfoDetails(row, index) {
      const _registerStudentName = row.registerStudentName;
      const _templateName = row.messageTemplate.name ? row.messageTemplate.name : '';
      const _templateTypeName = row.messageTemplate.messageTemplateType && row.messageTemplate.messageTemplateType.name ? row.messageTemplate.messageTemplateType.name : '';
      var _qo = {};
      _qo.MessageId = row.id;
      _qo.IncludeMessage = true;
      _qo.IncludeMessageStatus = true;
      // _qo.IncludeTemplate = true;
      api_GET_ClubMessageMessagePushLogs(_qo).then(
        res => {
          if (res) {
            this.detailsInfTableData = res || [];
            this.detailsInfTableData.map(item => {
              item.registerStudentName = _registerStudentName;
              item.templateName = _templateName;
              item.templateTypeName = _templateTypeName;
            });
            console.log('res', res);
            this.detailsInfTableData = this.detailsInfTableData.sort(function (a, b) {
              a.creationTime = FormatDate(a.creationTime, 'yyyy-MM-dd HH:mm:ss');
              b.creationTime = FormatDate(b.creationTime, 'yyyy-MM-dd HH:mm:ss');
              return b.creationTime > a.creationTime ? 1 : -1;
            });
            this.infoDetailsDialog = true;
          }
        },
        error => {
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        }
      );
    },
    // 删除
    deleteItem(row, index) {
      this.$confirm(`您确定要删除该条消息吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          api_DELETE_ClubMessageId(row.id).then(
            () => {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getPageList();
            },
            error => {
              const _msg = error.error.message || error.message;
              this.$message({ type: 'error', message: _msg });
            }
          );
        });
    },
    // 分页
    sizeChange(MaxResultCount) {
      this.qo.MaxResultCount = MaxResultCount;
      this.getPageList();
    },
    pageIndexChange(currentPage) {
      this.getPageList(currentPage);
    }
  }
};
</script>

